<script setup>
import InputEditer from '../components/InputEditerDeep.vue'
import InputEditer2 from '../components/InputEditerDeep2.vue'
import InputEditerArr from '../components/InputEditerArr3.vue'
import { ref, defineProps } from 'vue'
import { _getFileData, _setFilePath, _putDataPop } from '/src/api/parameterConfiguration/getData.js'
import { mainStore } from '/src/store/mainStore.js'
import { dataProcessing_deep_pop } from '../js/dataPro_deep_pop.js'
import { dataProcessing_deep_pop_2 } from '../js/dataPro_deep_pop_2.js'
import { _saveItem } from '/src/api/parameterConfiguration/index.js'

const props = defineProps({
  data: Object,
  name: String,
  query: Function,
  close: Function,
})

let showPage = ref(1)

const store = mainStore()

let data_1 = ref(null)
let data_2 = ref(null)
let data_3 = ref(null)
const init = () => {
  const data = dataProcessing_deep_pop(props.data)
  data_1.value = data.data_1
  data_2.value = data.data_2
  data_3.value = data.data_3
}

init()

const save = async () => {
  const arr = [...data_1.value.data, ...data_2.value.data, ...data_3.value.data]
  const url = `deep-stream-config`

  for (let index = 0; index < arr.length; index++) {
    const item = arr[index]
    const { parentNode, key } = item
    const params = {}
    if (!params[parentNode]) params[parentNode] = {}
    params[parentNode][key] = item.value
    if (item.arr) params[parentNode][key] = item.arr
    await _saveItem(url, params)
  }

  ElMessage.success('保存成功')
  await props.query()
}

let currentName = ref('')
let data2_1 = ref(null)
let data2_2 = ref(null)
let reload = ref(0)

const getList = async () => {
  const res = await _getFileData('deep-stream-pgie-config')
  if (res.data.code == 200) {
    showPage.value = 2
    const data = dataProcessing_deep_pop_2(res.data.data)
    reload.value = Date.now()
    data2_1.value = data.data_1
    data2_2.value = data.data_2
  } else {
    ElMessage.error('获取文件信息失败')
  }
}

const save2 = async () => {
  const params_1 = {}
  const params_2 = {}

  data2_1.value.data.forEach((item) => {
    params_1[item.key] = item.value
  })
  data2_2.value.data.forEach((item) => {
    params_2[item.key] = item.value
  })

  const params = {
    property: params_1,
    'class-attrs-all': params_2,
  }

  const res2 = await _putDataPop('deep-stream-pgie-config', params)

  if (res2.data.code == 200) {
    ElMessage.success('保存成功')
    await getList()
  }
}

const handleClick = async () => {
  const name = data_3.value.data[1].value
  const params = {
    'deepstream-pgie-config-name': name,
  }
  currentName.value = name
  await _setFilePath('deep-stream-pgie-config', params)
  await getList()
}
</script>

<template>
  <div class="pop-container" v-if="showPage == 1" @mousedown.stop @click.stop>
    <div class="title">
      <p>{{ props.name }}</p>
      <p @click="close">X</p>
    </div>

    <div class="main">
      <div class="pop-item" v-if="data_1">
        <div class="title2">{{ data_1.title }}</div>
        <div class="input-item" style="margin-top: 10px" v-for="item in data_1?.data" :key="item">
          <InputEditerArr v-if="item.arr" :data="item" :width="200" />
          <InputEditer v-else :data="item" :width="200" :inputWidth="360 + 'px'" />
        </div>
      </div>

      <div class="pop-item" v-if="data_2">
        <div class="title2">{{ data_2.title }}</div>
        <div class="input-item" style="margin-top: 10px" v-for="item in data_2?.data" :key="item">
          <InputEditerArr v-if="item.arr" :data="item" :width="120" />
          <InputEditer v-else :data="item" :width="120" />
        </div>
      </div>

      <div class="pop-item" v-if="data_3">
        <div class="title2">{{ data_3.title }}</div>
        <div class="input-item" style="margin-top: 10px" v-for="item in data_3?.data" :key="item">
          <InputEditer :data="item" :width="200" :inputWidth="360 + 'px'" />
        </div>
        <div class="input-item" style="margin-top: 10px">
          <el-button type="primary" size="small" @click="handleClick" class="btn">查看该配置文件</el-button>
        </div>
      </div>

      <!-- 按钮选项 -->
      <div class="parameterConfiguration_floor floor2">
        <div class="btn_bg" @click="query">查询</div>
        <div class="btn_bg" @click="save">配置</div>
      </div>
    </div>
  </div>

  <div class="pop-container" v-if="showPage == 2" :key="reload" @mousedown.stop @click.stop>
    <div class="title">
      <p>{{ currentName }}</p>
      <p @click="showPage = 1">X</p>
    </div>

    <div class="main">
      <div class="pop-item" v-if="data2_1">
        <div class="title2">{{ data2_1.title }}</div>
        <div class="input-item" style="margin-top: 10px" v-for="item in data2_1?.data" :key="item">
          <InputEditer2 :data="item" :width="200" :inputWidth="900 + 'px'" />
        </div>
      </div>

      <div class="pop-item" v-if="data2_2">
        <div class="title2">{{ data2_2.title }}</div>
        <div class="input-item" style="margin-top: 10px" v-for="item in data2_2?.data" :key="item">
          <InputEditer2 :data="item" :width="200" :inputWidth="900 + 'px'" />
        </div>
      </div>
    </div>
    <!-- 按钮选项 -->
    <div class="parameterConfiguration_floor floor2">
      <div class="btn_bg" @click="getList">查询</div>
      <div class="btn_bg" @click="save2">配置</div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.pop-container {
  width: 1200px;
  height: 100%;
  background-color: white;
  padding: 10px;
  font-size: 14px;
  position: relative;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
}

.main {
  flex: 1;
  max-height: 860px;
  overflow-y: auto;
  padding: 0 0 20px 0;
}

.input-item {
  width: 100%;
  margin-right: 40px;
  margin-top: 16px !important;
}

.pop-item {
  margin-top: 10px;
}

.cz-box {
  display: flex;
  > p {
    cursor: pointer;
    color: blue;
    margin-right: 20px;
  }
}

.floor2 {
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: #ffffff;
}

.file-ben-box {
  width: 600px;
  margin-top: 20px;
  .add {
    height: 30px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    img {
      width: 20px;
      height: 20px;
      cursor: pointer;
      margin-left: 12px;
    }
  }
}

.title2 {
  color: blue;
}

.title {
  width: 100%;
  height: 30px;
  color: blueviolet;
  font-size: 16px;
  font-weight: 600;
  border-bottom: 1px solid #ccc;
  display: flex;
  justify-content: space-between;
  > p:nth-child(2) {
    color: black;
    cursor: pointer;
  }
}
</style>
